import React,{useState,useEffect} from 'react';
import * as service from '../../../../api/zynindex'
import * as asset from '../../../../api/ningindex'
import { Select, Layout, Form, theme, DatePicker, Button,Input,Table,Tag} from 'antd';
import '../PurchaseOrder/PurchaseOrder.scss'
import { PlusOutlined } from '@ant-design/icons';

const { Header, Content, Sider } = Layout;
const { Option } = Select;
const { RangePicker } = DatePicker;
const { Search } = Input;

interface Props {

}

function PurchaseOrder(props: Props) {
    const {
        token: { colorBgContainer },
    } = theme.useToken();

    const onSearch = (value: string) => console.log(value);

    var [tableData,setTableData] = useState([ ])

    // 获取采购单
    var buy_list = async ()=>{
        var res = await asset.buy_list();
        // console.log(res);
             //遍历每个商品id, 给它添加key属性
             res.data.map((item:any)=>{
              item.key = item.proid;
          })
        setTableData(res.data);
    }
    useEffect(()=>{
        buy_list();
    },[])

    // 删除单条采购单
    var handleClick=async (id:any)=>{
        var res= await asset.delete_buy({id})
        console.log(res);
        // setTableData(res.data);
        buy_list();
    }


    // 搜索采购单

    var handleChange= async (value: string)=>{
        var res=await service.buy_search({status:value})
        // console.log(res);
        setTableData(res.data);

    }
    const columns = [
        {
            title: '采购单号',
            dataIndex: 'cgOdd',
            key: 'cgOdd',
            render: ( _:any ,record:any ) => <a>{record.cgOdd}</a>,
        },
        {
            title: '资产状态',
            dataIndex: 'cgState',
            key: 'cgState',
            render: ( _:any ,record:any ) =>  <Tag color="success">{record.cgState}</Tag>,
        },
        {
            title: '总数量',
            dataIndex: 'cgNum',
            key: 'cgNum',
            render: ( _:any ,record:any ) => <a>{record.cgNum }</a>
        },
        {
            title: '总金额',
            dataIndex: 'cgPrice',
            key: 'cgPrice',
            render: ( _:any ,record:any ) => {
                return <>
                      {record.cgPrice}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '申请公司',
            dataIndex: 'cgCompany',
            key: 'cgCompany',
            render: ( _:any ,record:any ) => {
                return <> {record.cgCompany}</>
            },//动态渲染标签/组件
        },
        {
            title: '申请部门',
            dataIndex: 'cgBranch',
            key: 'cgBranch',
            render: ( _:any ,record:any ) => {
                return <>
                     {record.cgBranch} 
                </>
            },//动态渲染标签/组件
        },
        {
            title: '申请人员',
            dataIndex: 'cgStaff',
            key: 'cgStaff',
            render: ( _:any ,record:any ) => {
                return <>
                      {record.cgStaff}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '申请日期',
            dataIndex: 'cgData',
            key: 'cgData',
            render: ( _:any ,record:any ) => {
                return <>
                    {record.cgData}
                </>
            },//动态渲染标签/组件
        },
        {
            title: '操作',
            dataIndex: 'action',
            key: 'action',
            render: ( _:any ,record:any ) => {
                return <>
                <Button type="primary" onClick={()=>{handleClick(record.id)}}>作废</Button>
                </>
            },
        },
];
    return (
        <div className='purchaseOrder'>
            <Content
                style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                    background: colorBgContainer,
                }}
            >
                <div className="shang">
                    <div className="line"> </div>
                    <div className="set">采购单</div>
                </div>
                <div className="zhong">
                    <div className="t1">采购状态</div>
                    <Form style={{ maxWidth: 200 }}>
                        <Form.Item rules={[{ required: true }]} >
                            <Select
                                defaultValue="请选择"
                                allowClear
                                onChange={handleChange}
                            >
                                <Option value="待入库">待入库</Option>
                                <Option value="部分入库">部分入库</Option>
                                <Option value="已入库">已入库</Option>
                                <Option value="已作废">已作废</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                    <div className="t1">申请部门</div>
                    <Form style={{ maxWidth: 200 }}>
                        <Form.Item rules={[{ required: true }]} >
                            <Select
                                placeholder="请选择"
                                allowClear
                            >
                                <Option value="male">产品部</Option>
                                <Option value="female">研发部</Option>
                            </Select>
                        </Form.Item>
                    </Form>
                    <div className="date">
                        <div className="t1">申请日期</div>
                        <Form>
                            <Form.Item>
                                <RangePicker />
                            </Form.Item>
                        </Form>
                    </div>
                    <div className="btn">
                        <Button type="primary"><PlusOutlined />新增采购单</Button>
                        <Button >导出</Button>
                        <Button >全部删除</Button>
                    </div>
                </div>
                <Search placeholder="请输入关键字" onSearch={onSearch} style={{ width: 300}} />
                <Table columns={columns} dataSource={tableData} />
            </Content>
        </div>
    );
}

export default PurchaseOrder;